ApplicationReviewWithNav.render - Code Metrics - Inspection of "Rename twig template from base-h2 to base" - GCTC-NTGC/TalentCloud - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/ie-alert ( 54e1a2...c8a02a )

unknown

created 2021-01-19 18:30 UTC

ApplicationReviewWithNav.render C

↳ Parent: ApplicationReviewWithNav

Complexity

Conditions

Size

Total Lines	218
Code Lines	185

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	185
c	0
b	0
f	0
dl	0
loc	218
rs	6.5333
cc	5

How to fix Long Method

import React from "react";
import {
  injectIntl,
  WrappedComponentProps,
  FormattedMessage,
} from "react-intl";
import className from "classnames";
import Swal, { SweetAlertResult } from "sweetalert2";
import * as routes from "../../helpers/routes";
import Select, { SelectOption } from "../Select";
import { Application } from "../../models/types";
import { ReviewStatusId } from "../../models/lookupConstants";
import { Portal } from "../../models/app";
import { messages } from "./ApplicationReview";

interface ApplicationReviewWithNavProps {
  application: Application;
  reviewStatusOptions: SelectOption[];
  onStatusChange: (
    applicationId: number,
    statusId: number | null,
  ) => Promise<void>;
  onNotesChange: (applicationId: number, notes: string | null) => void;
  isSaving: boolean;
  portal: Portal;
}

interface ApplicationReviewWithNavState {
  selectedStatusId: number | undefined;
}

class ApplicationReviewWithNav extends React.Component<
  ApplicationReviewWithNavProps & WrappedComponentProps,
  ApplicationReviewWithNavState
> {
  public constructor(
    props: ApplicationReviewWithNavProps & WrappedComponentProps,
  ) {
    super(props);
    this.state = {
      selectedStatusId:
        props.application.application_review &&
        props.application.application_review.review_status_id
          ? props.application.application_review.review_status_id
          : undefined,
    };
    this.handleStatusChange = this.handleStatusChange.bind(this);
    this.handleSaveClicked = this.handleSaveClicked.bind(this);
    this.showNotes = this.showNotes.bind(this);
    this.handleLinkClicked = this.handleLinkClicked.bind(this);
    this.isUnchanged = this.isUnchanged.bind(this);
  }

  /**
   * Returns true only if selectedStatusId matches the review
   * status of props.application
   */
  protected isUnchanged = (): boolean => {
    const { application } = this.props;
    const { selectedStatusId } = this.state;
    if (
      application.application_review &&
      application.application_review.review_status_id
    ) {
      return (
        application.application_review.review_status_id === selectedStatusId
      );
    }
    return selectedStatusId === undefined;
  };

  /**
   * When save is clicked, it is only necessary to save the status
   * @param event
   */
  protected handleSaveClicked(): Promise<void> {
    const { selectedStatusId } = this.state;
    const { application, onStatusChange, intl } = this.props;
    const status = selectedStatusId || null;

    const sectionChange = (
      oldStatus: number | null,
      newStatus: number | null,
    ): boolean => {
      const oldIsScreenedOut: boolean =
        oldStatus === ReviewStatusId.ScreenedOut;
      const newIsScreenedOut: boolean =
        newStatus === ReviewStatusId.ScreenedOut;
      return oldIsScreenedOut !== newIsScreenedOut;
    };
    const oldStatus = application.application_review
      ? application.application_review.review_status_id
      : null;
    if (sectionChange(oldStatus, status)) {
      const confirmText =
        status === ReviewStatusId.ScreenedOut
          ? intl.formatMessage(messages.screenOutConfirm)
          : intl.formatMessage(messages.screenInConfirm);
      return Swal.fire({
        title: confirmText,
        icon: "question",
        showCancelButton: true,
        confirmButtonColor: "#0A6CBC",
        cancelButtonColor: "#F94D4D",
        confirmButtonText: intl.formatMessage(messages.confirmButton),
        cancelButtonText: intl.formatMessage(messages.cancelButton),
      }).then((result: SweetAlertResult) => {
        if (result.value) {
          return onStatusChange(application.id, status);
        }
        return Promise.resolve();
      });
    }
    return onStatusChange(application.id, status);
  }

  protected showNotes(): void {
    const { application, onNotesChange, intl } = this.props;
    const notes =
      application.application_review && application.application_review.notes
        ? application.application_review.notes
        : "";
    Swal.fire({
      title: intl.formatMessage(messages.editNote),
      icon: "question",
      input: "textarea",
      showCancelButton: true,
      confirmButtonColor: "#0A6CBC",
      cancelButtonColor: "#F94D4D",
      cancelButtonText: intl.formatMessage(messages.cancelButton),
      confirmButtonText: intl.formatMessage(messages.save),
      inputValue: notes,
    }).then((result: SweetAlertResult) => {
      if (result && result.value !== undefined) {
        const value = result.value ? result.value : null;
        onNotesChange(application.id, value);
      }
    });
  }

  protected handleLinkClicked(url: string): void {
    if (this.isUnchanged()) {
      window.location.href = url;
      return;
    }
    this.handleSaveClicked()
      .then(() => {
        window.location.href = url;
      })
      .catch(() => {
        // do not navigate away from page
      });
  }

  protected handleStatusChange(
    event: React.ChangeEvent<HTMLSelectElement>,
  ): void {
    const value =
      event.target.value && !Number.isNaN(Number(event.target.value))
        ? Number(event.target.value)
        : undefined;
    this.setState({ selectedStatusId: value });
  }

  public render(): React.ReactElement {
    const {
      application,
      reviewStatusOptions,
      isSaving,
      intl,
      portal,
    } = this.props;
    const l10nReviewStatusOptions = reviewStatusOptions.map((status) => ({
      value: status.value,
      label: intl.formatMessage(messages[status.label]),
    }));
    const { selectedStatusId } = this.state;
    const reviewStatus =
      application.application_review &&
      application.application_review.review_status
        ? application.application_review.review_status.name
        : null;
    const statusIconClass = className("fas", {
      "fa-ban": reviewStatus === "screened_out",
      "fa-question-circle": reviewStatus === "still_thinking",
      "fa-check-circle": reviewStatus === "still_in",
      "fa-exclamation-circle": reviewStatus === null,
    });
    const applicantUrlMap: { [key in typeof portal]: string } = {
      hr: routes.hrApplicantShow(
        intl.locale,
        application.applicant_id,
        application.job_poster_id,
      ),
      manager: routes.managerApplicantShow(
        intl.locale,
        application.applicant_id,
        application.job_poster_id,
      ),
    };
    const applicationUrlMap: { [key in typeof portal]: string } = {
      hr: routes.hrApplicationShow(
        intl.locale,
        application.id,
        application.job_poster_id,
      ),
      manager: routes.managerApplicationShow(
        intl.locale,
        application.id,
        application.job_poster_id,
      ),
    };
    const jobUrlMap: { [key in typeof portal]: string } = {
      hr: routes.hrJobPreview(intl.locale, application.job_poster_id),
      manager: routes.managerJobPreview(intl.locale, application.job_poster_id),
    };
    const jobApplicationsUrlMap: { [key in typeof portal]: string } = {
      hr: routes.hrJobApplications(intl.locale, application.job_poster_id),
      manager: routes.managerJobApplications(
        intl.locale,
        application.job_poster_id,
      ),
    };
    const applicantUrl = applicantUrlMap[portal];
    const applicationUrl = applicationUrlMap[portal];
    const jobUrl = jobUrlMap[portal];
    const jobApplicationsUrl = jobApplicationsUrlMap[portal];

    const getSaveButtonText = (): string => {
      if (isSaving) {
        return intl.formatMessage(messages.saving);
      }
      if (this.isUnchanged()) {
        return intl.formatMessage(messages.saved);
      }
      return intl.formatMessage(messages.save);
    };
    const saveButtonText = getSaveButtonText();
    const noteButtonText =
      application.application_review && application.application_review.notes
        ? intl.formatMessage(messages.editNote)
        : intl.formatMessage(messages.addNote);
    return (
      <div>
        <div>
          <div className="manager-application-preview-actions flex-grid">
            <div className="box small-1of3">
              <button
                className="button--blue light-bg"
                type="button"
                onClick={() => this.handleLinkClicked(jobApplicationsUrl)}
              >
                {`< `}
                <FormattedMessage
                  id="application.review.backToApplicantList"
                  defaultMessage="Save and Go Back to Applicant List"
                  description="Back Button text"
                />
              </button>
            </div>
            <div className="box small-2of3">
              <a
                className="button--blue light-bg"
                href={jobUrl}
                style={{ marginRight: ".5rem" }}
              >
                <FormattedMessage
                  id="application.review.button.viewJobPoster"
                  defaultMessage="View Job Poster"
                  description="View Job Poster Button text"
                />
              </a>
              <button
                className="button--blue light-bg"
                data-button-type="expand-all"
                type="button"
                id="expand-all"
              >
                <span className="expand">
                  {" "}
                  <FormattedMessage
                    id="application.review.expandAllSkills"
                    defaultMessage="Expand All Skills"
                    description="Expand All Skills Button text"
                  />
                </span>
                <span className="collapse">
                  {" "}
                  <FormattedMessage
                    id="application.review.collapseAllSkills"
                    defaultMessage="Collapse All Skills"
                    description="Collapse All Skills Button text"
                  />
                </span>
              </button>
            </div>
          </div>
        </div>

        <form className="applicant-summary">
          <div className="flex-grid middle gutter">
            <div className="box lg-1of11 applicant-status">
              <i className={statusIconClass} />
            </div>

            <div className="box lg-2of11 applicant-information">
              <span className="name">
                {application.applicant.user.first_name}{" "}
                {application.applicant.user.last_name}
              </span>
              <a
                href={`mailto: ${application.applicant.user.email}`}
                title={intl.formatMessage(messages.emailCandidate)}
              >
                {application.applicant.user.email}
              </a>
              {/* This span only shown for veterans */}
              {(application.veteran_status.name === "current" ||
                application.veteran_status.name === "past") && (
                <span className="veteran-status">
                  <img
                    alt={intl.formatMessage(messages.viewApplicationTitle)}
                    src={routes.imageUrl("icon_veteran.svg")}
                  />{" "}
                  {intl.formatMessage(messages.veteranStatus)}
                </span>
              )}
            </div>

            <div className="box lg-2of11 applicant-links">
              <a
                title={intl.formatMessage(messages.viewApplicationTitle)}
                href={applicationUrl}
              >
                <i className="fas fa-file-alt" />
                {intl.formatMessage(messages.viewApplicationText)}
              </a>
              <a
                title={intl.formatMessage(messages.viewProfileTitle)}
                href={applicantUrl}
              >
                <i className="fas fa-user" />
                {intl.formatMessage(messages.viewProfileText)}
              </a>
            </div>

            <div className="box lg-2of11 applicant-decision" data-clone>
              <Select
                id={`review_status_${application.id}`}
                name="review_status"
                label={intl.formatMessage(messages.decision)}
                required={false}
                selected={selectedStatusId || null}
                nullSelection={intl.formatMessage(messages.notReviewed)}
                options={l10nReviewStatusOptions}
                onChange={this.handleStatusChange}
              />
            </div>

            <div className="box lg-2of11 applicant-notes">
              <button
                className="button--outline"
                type="button"
                onClick={this.showNotes}
              >
                {noteButtonText}
              </button>
            </div>

            <div className="box lg-2of11 applicant-save-button">
              <button
                className="button--blue light-bg"
                type="button"
                onClick={() => this.handleSaveClicked()}
              >
                <span>{saveButtonText}</span>
              </button>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

export default injectIntl(ApplicationReviewWithNav);


1			import React from "react";
2			import {
3			injectIntl,
4			WrappedComponentProps,
5			FormattedMessage,
6			} from "react-intl";
7			import className from "classnames";
8			import Swal, { SweetAlertResult } from "sweetalert2";
9			import * as routes from "../../helpers/routes";
10			import Select, { SelectOption } from "../Select";
11			import { Application } from "../../models/types";
12			import { ReviewStatusId } from "../../models/lookupConstants";
13			import { Portal } from "../../models/app";
14			import { messages } from "./ApplicationReview";
15
16			interface ApplicationReviewWithNavProps {
17			application: Application;
18			reviewStatusOptions: SelectOption[];
19			onStatusChange: (
20			applicationId: number,
21			statusId: number \| null,
22			) => Promise<void>;
23			onNotesChange: (applicationId: number, notes: string \| null) => void;
24			isSaving: boolean;
25			portal: Portal;
26			}
27
28			interface ApplicationReviewWithNavState {
29			selectedStatusId: number \| undefined;
30			}
31
32			class ApplicationReviewWithNav extends React.Component<
33			ApplicationReviewWithNavProps & WrappedComponentProps,
34			ApplicationReviewWithNavState
35			> {
36			public constructor(
37			props: ApplicationReviewWithNavProps & WrappedComponentProps,
38			) {
39			super(props);
40			this.state = {
41			selectedStatusId:
42			props.application.application_review &&
43			props.application.application_review.review_status_id
44			? props.application.application_review.review_status_id
45			: undefined,
46			};
47			this.handleStatusChange = this.handleStatusChange.bind(this);
48			this.handleSaveClicked = this.handleSaveClicked.bind(this);
49			this.showNotes = this.showNotes.bind(this);
50			this.handleLinkClicked = this.handleLinkClicked.bind(this);
51			this.isUnchanged = this.isUnchanged.bind(this);
52			}
53
54			/**
55			* Returns true only if selectedStatusId matches the review
56			* status of props.application
57			*/
58			protected isUnchanged = (): boolean => {
59			const { application } = this.props;
60			const { selectedStatusId } = this.state;
61			if (
62			application.application_review &&
63			application.application_review.review_status_id
64			) {
65			return (
66			application.application_review.review_status_id === selectedStatusId
67			);
68			}
69			return selectedStatusId === undefined;
70			};
71
72			/**
73			* When save is clicked, it is only necessary to save the status
74			* @param event
75			*/
76			protected handleSaveClicked(): Promise<void> {
77			const { selectedStatusId } = this.state;
78			const { application, onStatusChange, intl } = this.props;
79			const status = selectedStatusId \|\| null;
80
81			const sectionChange = (
82			oldStatus: number \| null,
83			newStatus: number \| null,
84			): boolean => {
85			const oldIsScreenedOut: boolean =
86			oldStatus === ReviewStatusId.ScreenedOut;
87			const newIsScreenedOut: boolean =
88			newStatus === ReviewStatusId.ScreenedOut;
89			return oldIsScreenedOut !== newIsScreenedOut;
90			};
91			const oldStatus = application.application_review
92			? application.application_review.review_status_id
93			: null;
94			if (sectionChange(oldStatus, status)) {
95			const confirmText =
96			status === ReviewStatusId.ScreenedOut
97			? intl.formatMessage(messages.screenOutConfirm)
98			: intl.formatMessage(messages.screenInConfirm);
99			return Swal.fire({
100			title: confirmText,
101			icon: "question",
102			showCancelButton: true,
103			confirmButtonColor: "#0A6CBC",
104			cancelButtonColor: "#F94D4D",
105			confirmButtonText: intl.formatMessage(messages.confirmButton),
106			cancelButtonText: intl.formatMessage(messages.cancelButton),
107			}).then((result: SweetAlertResult) => {
108			if (result.value) {
109			return onStatusChange(application.id, status);
110			}
111			return Promise.resolve();
112			});
113			}
114			return onStatusChange(application.id, status);
115			}
116
117			protected showNotes(): void {
118			const { application, onNotesChange, intl } = this.props;
119			const notes =
120			application.application_review && application.application_review.notes
121			? application.application_review.notes
122			: "";
123			Swal.fire({
124			title: intl.formatMessage(messages.editNote),
125			icon: "question",
126			input: "textarea",
127			showCancelButton: true,
128			confirmButtonColor: "#0A6CBC",
129			cancelButtonColor: "#F94D4D",
130			cancelButtonText: intl.formatMessage(messages.cancelButton),
131			confirmButtonText: intl.formatMessage(messages.save),
132			inputValue: notes,
133			}).then((result: SweetAlertResult) => {
134			if (result && result.value !== undefined) {
135			const value = result.value ? result.value : null;
136			onNotesChange(application.id, value);
137			}
138			});
139			}
140
141			protected handleLinkClicked(url: string): void {
142			if (this.isUnchanged()) {
143			window.location.href = url;
144			return;
145			}
146			this.handleSaveClicked()
147			.then(() => {
148			window.location.href = url;
149			})
150			.catch(() => {
151			// do not navigate away from page
152			});
153			}
154
155			protected handleStatusChange(
156			event: React.ChangeEvent<HTMLSelectElement>,
157			): void {
158			const value =
159			event.target.value && !Number.isNaN(Number(event.target.value))
160			? Number(event.target.value)
161			: undefined;
162			this.setState({ selectedStatusId: value });
163			}
164
165			public render(): React.ReactElement {
166			const {
167			application,
168			reviewStatusOptions,
169			isSaving,
170			intl,
171			portal,
172			} = this.props;
173			const l10nReviewStatusOptions = reviewStatusOptions.map((status) => ({
174			value: status.value,
175			label: intl.formatMessage(messages[status.label]),
176			}));
177			const { selectedStatusId } = this.state;
178			const reviewStatus =
179			application.application_review &&
180			application.application_review.review_status
181			? application.application_review.review_status.name
182			: null;
183			const statusIconClass = className("fas", {
184			"fa-ban": reviewStatus === "screened_out",
185			"fa-question-circle": reviewStatus === "still_thinking",
186			"fa-check-circle": reviewStatus === "still_in",
187			"fa-exclamation-circle": reviewStatus === null,
188			});
189			const applicantUrlMap: { [key in typeof portal]: string } = {
190			hr: routes.hrApplicantShow(
191			intl.locale,
192			application.applicant_id,
193			application.job_poster_id,
194			),
195			manager: routes.managerApplicantShow(
196			intl.locale,
197			application.applicant_id,
198			application.job_poster_id,
199			),
200			};
201			const applicationUrlMap: { [key in typeof portal]: string } = {
202			hr: routes.hrApplicationShow(
203			intl.locale,
204			application.id,
205			application.job_poster_id,
206			),
207			manager: routes.managerApplicationShow(
208			intl.locale,
209			application.id,
210			application.job_poster_id,
211			),
212			};
213			const jobUrlMap: { [key in typeof portal]: string } = {
214			hr: routes.hrJobPreview(intl.locale, application.job_poster_id),
215			manager: routes.managerJobPreview(intl.locale, application.job_poster_id),
216			};
217			const jobApplicationsUrlMap: { [key in typeof portal]: string } = {
218			hr: routes.hrJobApplications(intl.locale, application.job_poster_id),
219			manager: routes.managerJobApplications(
220			intl.locale,
221			application.job_poster_id,
222			),
223			};
224			const applicantUrl = applicantUrlMap[portal];
225			const applicationUrl = applicationUrlMap[portal];
226			const jobUrl = jobUrlMap[portal];
227			const jobApplicationsUrl = jobApplicationsUrlMap[portal];
228
229			const getSaveButtonText = (): string => {
230			if (isSaving) {
231			return intl.formatMessage(messages.saving);
232			}
233			if (this.isUnchanged()) {
234			return intl.formatMessage(messages.saved);
235			}
236			return intl.formatMessage(messages.save);
237			};
238			const saveButtonText = getSaveButtonText();
239			const noteButtonText =
240			application.application_review && application.application_review.notes
241			? intl.formatMessage(messages.editNote)
242			: intl.formatMessage(messages.addNote);
243			return (
244			<div>
245			<div>
246			<div className="manager-application-preview-actions flex-grid">
247			<div className="box small-1of3">
248			<button
249			className="button--blue light-bg"
250			type="button"
251			onClick={() => this.handleLinkClicked(jobApplicationsUrl)}
252			>
253			{`< `}
254			<FormattedMessage
255			id="application.review.backToApplicantList"
256			defaultMessage="Save and Go Back to Applicant List"
257			description="Back Button text"
258			/>
259			</button>
260			</div>
261			<div className="box small-2of3">
262			<a
263			className="button--blue light-bg"
264			href={jobUrl}
265			style={{ marginRight: ".5rem" }}
266			>
267			<FormattedMessage
268			id="application.review.button.viewJobPoster"
269			defaultMessage="View Job Poster"
270			description="View Job Poster Button text"
271			/>
272			</a>
273			<button
274			className="button--blue light-bg"
275			data-button-type="expand-all"
276			type="button"
277			id="expand-all"
278			>
279			<span className="expand">
280			{" "}
281			<FormattedMessage
282			id="application.review.expandAllSkills"
283			defaultMessage="Expand All Skills"
284			description="Expand All Skills Button text"
285			/>
286			</span>
287			<span className="collapse">
288			{" "}
289			<FormattedMessage
290			id="application.review.collapseAllSkills"
291			defaultMessage="Collapse All Skills"
292			description="Collapse All Skills Button text"
293			/>
294			</span>
295			</button>
296			</div>
297			</div>
298			</div>
299
300			<form className="applicant-summary">
301			<div className="flex-grid middle gutter">
302			<div className="box lg-1of11 applicant-status">
303			<i className={statusIconClass} />
304			</div>
305
306			<div className="box lg-2of11 applicant-information">
307			<span className="name">
308			{application.applicant.user.first_name}{" "}
309			{application.applicant.user.last_name}
310			</span>
311			<a
312			href={`mailto: ${application.applicant.user.email}`}
313			title={intl.formatMessage(messages.emailCandidate)}
314			>
315			{application.applicant.user.email}
316			</a>
317			{/* This span only shown for veterans */}
318			{(application.veteran_status.name === "current" \|\|
319			application.veteran_status.name === "past") && (
320			<span className="veteran-status">
321			<img
322			alt={intl.formatMessage(messages.viewApplicationTitle)}
323			src={routes.imageUrl("icon_veteran.svg")}
324			/>{" "}
325			{intl.formatMessage(messages.veteranStatus)}
326			</span>
327			)}
328			</div>
329
330			<div className="box lg-2of11 applicant-links">
331			<a
332			title={intl.formatMessage(messages.viewApplicationTitle)}
333			href={applicationUrl}
334			>
335			<i className="fas fa-file-alt" />
336			{intl.formatMessage(messages.viewApplicationText)}
337			</a>
338			<a
339			title={intl.formatMessage(messages.viewProfileTitle)}
340			href={applicantUrl}
341			>
342			<i className="fas fa-user" />
343			{intl.formatMessage(messages.viewProfileText)}
344			</a>
345			</div>
346
347			<div className="box lg-2of11 applicant-decision" data-clone>
348			<Select
349			id={`review_status_${application.id}`}
350			name="review_status"
351			label={intl.formatMessage(messages.decision)}
352			required={false}
353			selected={selectedStatusId \|\| null}
354			nullSelection={intl.formatMessage(messages.notReviewed)}
355			options={l10nReviewStatusOptions}
356			onChange={this.handleStatusChange}
357			/>
358			</div>
359
360			<div className="box lg-2of11 applicant-notes">
361			<button
362			className="button--outline"
363			type="button"
364			onClick={this.showNotes}
365			>
366			{noteButtonText}
367			</button>
368			</div>
369
370			<div className="box lg-2of11 applicant-save-button">
371			<button
372			className="button--blue light-bg"
373			type="button"
374			onClick={() => this.handleSaveClicked()}
375			>
376			<span>{saveButtonText}</span>
377			</button>
378			</div>
379			</div>
380			</form>
381			</div>
382			);
383			}
384			}
385
386			export default injectIntl(ApplicationReviewWithNav);
387

GCTC-NTGC / TalentCloud

Push — feature/ie-alert ( 54e1a2...c8a02a )

ApplicationReviewWithNav.render C

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like